<template>
  <div class="art-full-height">
    <div class="tree-container">
      <div class="left-sidebar">
        <ElCard class="art-table-card" shadow="never" style="margin-top: 0">
          <b>左右布局示例：</b>
          <p style="margin-top: 20px">例如：分类、树形结构等</p>
        </ElCard>
      </div>

      <div class="right-content art-full-height">
        <UserSearch v-model="defaultFilter" />

        <ElCard class="art-table-card" shadow="never">
          <ArtTableHeader
            v-model:columns="columnChecks"
            :loading="loading"
            @refresh="refreshData"
          >
            <template #left>
              <ElSpace wrap>
                <ElButton
                  @click="showButtons = !showButtons"
                  v-ripple
                  type="primary"
                  plain
                  >{{ showButtons ? "收起" : "展开" }}按钮组</ElButton
                >
                <ElButton v-show="showButtons" v-ripple v-for="value in 12" :key="value"
                  >表格自适应</ElButton
                >
              </ElSpace>
            </template>
          </ArtTableHeader>

          <ArtTable
            rowKey="id"
            :loading="loading"
            :data="data"
            :columns="columns"
            :pagination="pagination"
            @pagination:size-change="handleSizeChange"
            @pagination:current-change="handleCurrentChange"
          >
          </ArtTable>
        </ElCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/composables/useTable";
import { fetchGetUserList } from "@/api/system-manage";
import UserSearch from "@/views/example/system/user/modules/user-search.vue";

defineOptions({ name: "TreeTable" });

const showButtons = ref(false);

// 表单搜索初始值
const defaultFilter = ref({
  name: undefined,
});

const {
  data,
  columns,
  columnChecks,
  loading,
  pagination,
  refreshData,
  handleSizeChange,
  handleCurrentChange,
} = useTable({
  core: {
    apiFn: fetchGetUserList,
    apiParams: {
      current: 1,
      size: 20,
      userName: "",
      userPhone: "",
      userEmail: "",
    },
    columnsFactory: () => [
      {
        prop: "id",
        label: "ID",
      },
      {
        prop: "nickName",
        label: "昵称",
      },
      {
        prop: "userGender",
        label: "性别",
        sortable: true,
        formatter: (row) => row.userGender || "未知",
      },
      {
        prop: "userPhone",
        label: "手机号",
      },
      {
        prop: "userEmail",
        label: "邮箱",
      },
    ],
  },
});
</script>

<style lang="scss" scoped>
.tree-container {
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  height: 100%;

  .left-sidebar {
    flex-shrink: 0;
    width: 230px;
    height: 100%;
  }

  .right-content {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
  }

  .art-table-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

@media screen and (max-width: $device-ipad) {
  .tree-container {
    display: block;
    gap: 0;
    height: auto;

    .left-sidebar {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
  }
}
</style>
